<template>
	<view class="container">
		<u-navbar
			title="我的"
			:title-bold="true"
			title-color="#000"
			:border-bottom="false"
			custom-class="home-bg"
			:background="{ background: 'transparent' }"
			:is-back="false"
		></u-navbar>

		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<view class="avatar-wrapper">
					<image class="avatar" :src="user.avatar ? path + user.avatar : '/static/main/cs2.jpg'"></image>
				</view>
				<view class="user-info">
					<view class="name flex align-center">
						{{ user.nickName }}
						<text class="vip-img" v-if="user.memberName">{{ user.memberName }}</text>
					</view>
					<view class="code flex align-center">
						邀请码：{{ user.invitationCode }}
						<image
							@click="onCopy(user.invitationCode)"
							src="/static/user/Frame(1).png"
							style="width: 24rpx; height: 24rpx; margin: 0rpx 0 0 10rpx"
							mode="aspectFill"
						></image>
					</view>
				</view>
			</view>
			<view class="complete-btn" @click="messageUrl()">
				去完善信息
				<u-icon size="20" style="margin-left: 10rpx" name="arrow-right"></u-icon>
			</view>
		</view>

		<!-- 资产卡片 -->
		<view class="asset-card">
			<view class="flex flex-between align-center mb-50">
				<view class="order-name">我的订单</view>
				<view class="" @click="menuUrl('/pages/order/order')">
					查看全部
					<u-icon name="arrow-right" size="20" style="margin-left: 7rpx"></u-icon>
				</view>
			</view>
			<view class="flex flex-around align-center">
				<view class="flex flex-column align-center flex-center" v-for="(item, index) in orderFormList" @click="menuUrl(item.url)">
					<image :src="item.image" style="width: 50rpx; height: 50rpx; margin-bottom: 10rpx"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 余额卡片 -->
<!-- 				<view class="balance-card">
			<view class="balance-wrapper">
				<view class="balance-left">
					<image class="cash-icon" src="/static/user/image 27.png"></image>
					<text class="balance-label">账户余额：</text>
					<text class="balance-value">{{ user.remainRewardPoints }}</text>
				</view>
				<view class="recharge-btn" @click="rechargeUrl()">
					去充值
					<u-icon size="20" style="margin-left: 10rpx" name="arrow-right"></u-icon>
				</view>
			</view>
		</view> -->

		<!-- 功能列表 -->
		<view class="menu-list app-bottom">
			<view v-for="(item, index) in menuList">
				<view class="menu-item" @click="menuUrl(item.index)">
					<view class="flex align-center">
						<image :src="item.image" style="width: 40rpx; height: 40rpx; margin-right: 10rpx" mode="aspectFill"></image>
						<view class="menu-label">{{ item.label }}</view>
					</view>
					<u-icon size="20" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import user from '@/api/user.js';
import api from '@/api/index.js';
export default {
	data() {
		return {
			menuList: [
				{ label: '收货地址', image: '/static/user/Frame(2).png', index: '/pages/user_address/user_address' },
				{ label: '购买记录', image: '/static/user/Frame(4).png', index: '/pages/user/buyRecord/buyRecord' },
				{ label: '金额明细', image: '/static/user/Frame(3).png', index: '/pages/user/integral/integral' },
				{ label: '会员专区', image: '/static/user/Frame(11).png', index: '/pages/user/vip/vip' },
				{ label: '邀请码', image: '/static/user/Frame(5).png', index: '/pages/user/InvitationCode/invite' },
				{ label: '平台介绍', image: '/static/user/Frame(6).png', index: '/pages/user/introduce/introduce' },
				{ label: '银行卡管理', image: '/static/user/Frame(7).png', index: '/pages/user/card/card' },
				{ label: '退出登录', image: '/static/user/Frame(8).png', index: 'logout' }
			],
			orderFormList: [
				{
					image: '/static/order/dfh.png',
					name: '待发货',
					url: '/pages/order/order?index=1'
				},
				{
					image: '/static/order/dsh.png',
					name: '待收货',
					url: '/pages/order/order?index=2'
				},
				{
					image: '/static/order/ywc.png',
					name: '已完成',
					url: '/pages/order/order?index=3'
				}
			],
			user: {},
			path: api.getPath()
		};
	},
	onShow(e) {
		this.getInfo();
	},
	onPullDownRefresh() {
		// 重新获取数据
		Promise.all([this.getInfo]).finally(() => {
			// 停止下拉刷新动画
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		messageUrl() {
			uni.navigateTo({
				url: '/bundle/pages/user_set/user_set'
			});
		},
		menuUrl(url) {
			if (url == 'logout') {
				user.getLogout()
					.then((res) => {
						uni.showToast({
							title: '你以退出登录',
							icon: 'success',
							duration: 2000
						});
						uni.removeStorageSync('token'); // 彻底删除 token 键及其值
						uni.removeStorageSync('user');
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login'
							});
						}, 2000);
					})
					.catch((erro) => {
						console.log(erro);
					});
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		rechargeUrl() {
			uni.navigateTo({
				url: '/bundle/pages/user_payment/user_payment'
			});
		},
		onCopy(row) {
			wx.setClipboardData({
				data: row,
				success(res) {
					wx.showToast({
						title: '复制成功',
						icon: 'success'
					});
				}
			});
		},
		getInfo() {
			user.getInfo()
				.then((res) => {
					this.user = res.data;
					uni.setStorageSync('user', this.user);
				})
				.catch((erro) => {
					console.log(erro);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-name {
	font-weight: 600;
	font-size: 28rpx;
	color: #000;
}
.vip-img {
	display: block;
	margin-left: 30rpx;
	padding: 5rpx 20rpx;
	font-weight: 500;
	font-size: 18rpx;
	background-color: #363636;
	color: #e0e000;
	border-radius: 20rpx 0 20rpx 0;
}
.container {
	height: 414rpx;
	background: linear-gradient(167deg, #ffdad2 0%, transparent 70%);

	// 用户信息卡片
	.user-card {
		margin: 20rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.avatar-wrapper {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.user-info {
				flex: 1;
				margin-left: 20rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.code {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.complete-btn {
			padding: 10rpx 10rpx 10rpx 20rpx;
			background-color: #ff8a3c;
			color: #fff;
			font-size: 24rpx;
			line-height: 24rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
		}
	}

	// 资产卡片
	.asset-card {
		margin: 0 20rpx 20rpx;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;
		background: url('@/static/user/Frame2.png') no-repeat;
		background-size: 100% auto;

		font-size: 26rpx;
	}

	// 余额卡片
	.balance-card {
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		background: url('@/static/user/Frame3.png') no-repeat;
		background-size: 100% auto;

		.balance-wrapper {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.balance-left {
				display: flex;
				align-items: center;

				.cash-icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.balance-label {
				font-weight: 600;
				font-size: 32rpx;
				color: #513d01;
			}

			.balance-value {
				font-weight: bold;
				font-size: 32rpx;
				color: #513d01;
			}
		}

		.recharge-btn {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
	}

	// 菜单列表
	.menu-list {
		margin-top: 20rpx;
		.menu-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx;
			height: 96rpx;
			margin: 20rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.menu-label {
				width: 160rpx;
				font-size: 28rpx;
				color: #333;
			}

			.arrow {
				color: #ccc;
				font-size: 24rpx;
			}
		}
	}
}
</style>
